<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px;">
            <div style="width: 755px;">
                <div>
                    <span>搜索结果：</span>
                    <el-button type="primary" style="width: 100px;" plain @click="()=>{showProduct = true}" :disabled="productCount === 0">公司产品({{productCount}}个)</el-button>
                    <el-button type="primary" style="width: 100px;" plain @click="()=>{showProduct = false}" :disabled="newsCount === 0">公司资讯({{newsCount}}个)</el-button>
                </div>
                <div style="margin-top: 10px;"  v-if="showProduct">
                    <el-table :data="productData" style="width: 100%">
                        <el-table-column type="index"/>
                        <el-table-column prop="title" label="产品名称" />
                        <el-table-column fixed="right" label="操作" width="80">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="() => router.push({ path: '/detail',  query: {'id': scope.row.id} })">
                                    查看详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="margin-top: 10px;"  v-else>
                    <el-table :data="newsData" style="width: 100%">
                        <el-table-column type="index"/>
                        <el-table-column prop="title" label="产品名称" />
                        <el-table-column fixed="right" label="操作" width="80">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="() => router.push({ path: '/news',  query: {'id': scope.row.id} })">
                                    查看详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { watch, reactive, ref } from 'vue';
import { btyStore } from '@/stores/bty';
import { useRouter, useRoute } from 'vue-router';
import { getSearch } from '@/requests/index';
const route = useRoute();
const searchContent = ref(route.query.content);
const newsCount = ref(0);
const newsData = ref()
const productCount = ref(0);
const productData = ref()
const router = useRouter();
const showProduct = ref(true);

const initStore = btyStore();


const getSearchResult = async()=>{
    const res = await getSearch({"search": searchContent.value});
    if (res.status){
        newsCount.value = res.news.count;
        newsData.value = res.news.data;
        productCount.value = res.products.count;
        productData.value = res.products.data;
        console.log(productData.value)
    }else{
        console.log("查询失败");
    };
    showProduct.value = true;
}

getSearchResult();
watch(() => initStore.search, (newValue, oldValue) => {
    searchContent.value = newValue;
    getSearchResult();
})



</script>